import {
  PageContainer,
  ProCard,
  ProColumns,
  ProDescriptions,
  ProDescriptionsActionType,
  ProTable,
} from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import { getInterfaceInfoDetailByIdUsingGet } from '@/services/sutongapi-backend/interfaceInfoController';
import { Button, Divider } from 'antd';
import { useParams } from '@@/exports';

const style = {
  marginBottom: 24,
  marginLeft: 30,
  marginRight: 30,
};
const InterfaceInfoDetail: React.FC = () => {
  let params = useParams();
  const [data, setData] = useState<API.InterfaceInfoDetail>();
  const [loading, setLoading] = useState<boolean>(false);
  const actionRef = useRef<ProDescriptionsActionType>();

  const columns: ProColumns<API.InterfaceParam>[] = [
    {
      title: '参数名称',
      dataIndex: 'name',
      valueType: 'text',
      ellipsis: true,
    },
    {
      title: '参数字段类型',
      dataIndex: 'fieldType',
      valueType: 'text',
    },
    {
      title: '是否必填',
      dataIndex: 'required',
      valueEnum: {
        0: {
          text: '否',
          status: 'Error',
        },
        1: {
          text: '是',
          status: 'Success',
        },
      },
    },
    {
      title: '参数说明',
      dataIndex: 'description',
      valueType: 'textarea',
      ellipsis: true,
    },
  ];
  const responseColumns: ProColumns<API.InterfaceParam>[] = [
    {
      title: '参数名称',
      dataIndex: 'name',
      valueType: 'text',
      ellipsis: true,
    },
    {
      title: '参数字段类型',
      dataIndex: 'fieldType',
      valueType: 'text',
    },
    {
      title: '参数说明',
      dataIndex: 'description',
      valueType: 'textarea',
      ellipsis: true,
    },
  ];

  return (
    <>
      <ProCard
        title="API开放平台"
        headStyle={{ textAlign: 'center' }}
        bodyStyle={{ fontSize: '15px' }}
        bordered
        direction="column"
        layout="center"
        loading={loading}
      >
        <h2>{data?.name}</h2>
        <h3>{data?.description}</h3>
      </ProCard>

      <PageContainer header={{ title: '' }}>
        <ProCard style={{ padding: 20 }}>
          <ProDescriptions
            actionRef={actionRef}
            title="详情"
            request={async () => {
              setLoading(true);
              const res = await getInterfaceInfoDetailByIdUsingGet({ id: Number(params.id) });
              setData(res.data);
              setLoading(false);
              return {
                data: res.data || {},
                success: res.code === 0,
              };
            }}
          >
            <ProDescriptions.Item dataIndex="name" label="名称" />
            <ProDescriptions.Item dataIndex="url" label="URL" />
            <ProDescriptions.Item dataIndex="method" label="请求方式" />
            <ProDescriptions.Item dataIndex="createTime" label="创建日期" valueType="dateTime" />
            <ProDescriptions.Item dataIndex="description" label="描述" />
            <ProDescriptions.Item label="文本" valueType="option">
              <Button
                type="primary"
                onClick={() => {
                  actionRef.current?.reload();
                }}
                key="reload"
              >
                刷新
              </Button>
            </ProDescriptions.Item>
          </ProDescriptions>
          {data?.requestParams && data?.requestParams?.length > 0 && (
            <>
              <Divider style={{ marginBottom: 32 }} />
              <ProDescriptions title="请求参数" loading={loading}>
                <ProTable
                  size="small"
                  style={style}
                  pagination={false}
                  search={false}
                  options={false}
                  toolBarRender={false}
                  dataSource={data?.requestParams}
                  columns={columns}
                  rowKey="id"
                />
              </ProDescriptions>
            </>
          )}
          {data?.requestHeaders && data?.requestHeaders?.length > 0 && (
            <>
              <Divider style={{ marginBottom: 32 }} />
              <ProDescriptions title="请求头参数" loading={loading}>
                <ProTable
                  size="small"
                  style={style}
                  pagination={false}
                  search={false}
                  options={false}
                  toolBarRender={false}
                  dataSource={data?.requestHeaders}
                  columns={columns}
                  rowKey="id"
                />
              </ProDescriptions>
            </>
          )}
          {data?.responseParams && data?.responseParams?.length > 0 && (
            <>
              <Divider style={{ marginBottom: 32 }} />
              <ProDescriptions title="响应参数" loading={loading}>
                <ProTable
                  size="small"
                  style={style}
                  pagination={false}
                  search={false}
                  options={false}
                  toolBarRender={false}
                  dataSource={data?.responseParams}
                  columns={responseColumns}
                  rowKey="id"
                />
              </ProDescriptions>
            </>
          )}
          {data?.responseHeaders && data?.responseHeaders?.length > 0 && (
            <>
              <Divider style={{ marginBottom: 32 }} />
              <ProDescriptions title="响应头参数" loading={loading}>
                <ProTable
                  size="small"
                  style={style}
                  pagination={false}
                  search={false}
                  options={false}
                  toolBarRender={false}
                  dataSource={data?.responseHeaders}
                  columns={responseColumns}
                  rowKey="id"
                />
              </ProDescriptions>
            </>
          )}
        </ProCard>
      </PageContainer>
    </>
  );
};

export default InterfaceInfoDetail;
